import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { faMapMarker } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { LockFilled } from '@ant-design/icons'

export default function EditCollectionCard() {
    const [activeKey, setActiveKey] = useState(1)
    const [itemWidth, setItemWidth] = useState<any>()

    useEffect(() => {
        setItemWidth($(`.${style.content}`).width() + 'px')
    }, [])

    return (
        <div
            className={style.container}
            style={{
                ['--item-width' as any]: itemWidth
            }}>
            <div className={style.content}>
                <p className={style.title}>修改收藏夹</p>
                <div className={style.item}>
                    <div className={style.item__input}>
                        <span>名字</span>
                        <textarea maxLength={60} rows={1} />
                    </div>
                    <div className={style.item__input}>
                        <span>描述（可选）</span>
                        <textarea maxLength={250} rows={3} />
                    </div>
                </div>
                <div className={style.private__item}>
                    <input type="checkbox" />
                    <span>将收藏设为私人收藏</span>
                    <LockFilled />
                </div>
            </div>

            <div className={style.bottom__btn}>
                <div className={style.delete__btn}>删除收藏夹</div>
                <div className={style.update__btn}>保存</div>
            </div>
        </div>
    )
}
